<template>
	<div>
			<smpPanel title="报文请求">
				<el-form :inline="false" label-width="90px" size="mini" ref="form" :model="query" :rules="rules">
					<el-row>
						<el-col :span="16">
							<el-form-item label="URL:" :label-col="{ span: 24 }" :wrapper-col="{ span: 16  }"
								prop="url">
								<!-- <el-select v-model="query.ip" style="width: 100%" placeholder="IP地址">
								<el-option v-for="item in esbEnvironmentList" :key="item.ip" :label="item.ip"
									:value="item.ip">
								</el-option>
							</el-select> -->

								<el-input v-model="query.url" :autosize="{minRows:10,maxRows:11}">
								</el-input>
							</el-form-item>
						</el-col>

						<el-col :span="8">
							<el-form-item label="字符编码:" :label-col="{ span: 24 }" :wrapper-col="{ span: 16  }"
								prop="charSet">
								<el-select v-model="query.charSet" style="width: 100%" placeholder="IP字符编码">
									<el-option v-for="item in dict('SMP0004')" :key="item.itemCode"
										:label="item.itemName" :value="item.itemCode">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>

						<el-col :span="24">
							<el-form-item label="请求报文:" :label-col="{ span: 24 }" :wrapper-col="{ span: 16  }"
								prop="requestBody">
								<el-input type="textarea" v-model="query.requestBody"
									:autosize="{minRows:10,maxRows:11}">
								</el-input>
							</el-form-item>
						</el-col>



						<el-col :span="24">
							<el-form-item size="mini" style="text-align: right;">
								<el-button type="primary" plain @click="onSubmit">发&nbsp;&nbsp;&nbsp;送</el-button>
								<el-button @click="reset">重&nbsp;&nbsp;&nbsp;置</el-button>
							</el-form-item>
						</el-col>
					</el-row>
					</el-row>
				</el-form>
			</smpPanel>
			<smpPanel title="数据响应">
				<div class="article">
					<!-- vue展示markdown内容,v-highlight自定义指令 -->
					<div v-highlight v-html="query.responseBody" class="markdown-body" id="content"></div>
				</div </div>
			</smpPanel>
		</div>
</template>

<script>
	"use strict";
	import {
		getEsbEnvironmentByEsbFlg
	} from '@/api/environment.js';
	import {
		httpTrans
	} from '@/api/trans.js';
	import {
		service2Json,service2Xml
	} from '@/api/serviceExample.js';
	
	export default {
		data() {
			return {
				esbEnvironmentList: [],
				query: {
					url: "http://10.0.91.15:8001/ESBService/json/CARD",
					charSet: "01",
					requestBody: `{
    "Transaction":{
        "Header":{
            "sysHeader":{
                "pinIndex":"",
                "authContext":"",
                "bizType":"",
                "sysCd":"156",
                "bizResText":"",
                "msgId":"156202304060845303080235424861531317",
                "pinValue":"",
                "bizResCd":"",
                "authId":"",
                "extend":null,
                "resText":"",
                "authPara":"",
                "orgCd":"3401010079",
                "servCd":"P00001009803",
                "globalSq":"15620230406013080247519001000000",
                "resCd":"",
                "serverCd":"",
                "bizId":"",
                "msgTime":"08:45:30.802",
                "termCd":"",
                "tranCode":"203010",
                "operation":"",
                "msgDate":"2023-04-06"
            }
        },
        "Body":{
            "request":{
                "bizBody":{
                    "CRDACCT":"20010090578566600000013",
                    "pappSeqNo":"",
                    "Ccy":"",
                    "trancode":"202021"
                          },
            "bizHeader":{
                "ThrdSeqNo":"",
				"OrgChnlId":"156",
                "Teller":"999986",
                "ReqSeqNo":"20230406084530308023542486153131",
                "OrgTranDesc":"客户基础信息查询",
                "OrgTranCode":"203010",
                "Brc":"3401010079",
                "OrgDate":"2023-04-06",
                "ReqTranDesc":"客户基础信息查询",
                "ReqChnlId":"156",
                "OrgSeqNo":"20230406084530308023542486153131",
                "ReqTranCode":"203010",
                "ReqDate":"2023-04-06",
                "MultFlag":"",
                "ThrdTranDate":""
                }
            }
        }
    }
}`,
					responseBody: this.$marked('```json\n\n\n\n\n```')
				},
				rules: {
					ip: [{
						required: true,
						message: '请选择IP地址',
						trigger: 'change'
					}],
					port: [{
						required: true,
						message: '请输入端口',
						trigger: 'blur'
					}],
					charSet: [{
						required: true,
						message: '请选择字符编码',
						trigger: 'change'

					}],
					standard: [{
						required: true,
						message: '请选择字符编码',
						trigger: 'change'

					}],
					standard: [{
						required: true,
						message: '请选择字符编码',
						trigger: 'change'

					}],
					preType: [{
						required: true,
						message: '请选择字符编码',
						trigger: 'change'

					}],
					preLen: [{
						required: true,
						message: '请选择字符编码',
						trigger: 'change'

					}],
					supplement: [{
						required: true,
						message: '请选择字符编码',
						trigger: 'change'

					}],
					includeSelf: [{
						required: true,
						message: '请选择字符编码',
						trigger: 'change'

					}],
					requestBody: [{
						required: true,
						message: '请输入请求报文',
						trigger: 'blur'
					}],
				}
			}
		},

		created() {
			
			this.row = this.$route.query;
			if(this.row.proxyPath == undefined){
				this.getEsbEnvironmentList();
			}else{
				this.query.url = this.row.proxyPath;
				this.query.charSet = this.row.msgCode;
				this.getEsbEnvironmentList();
			}
			this.getEsbEnvironmentList();
		},

		methods: {
			getEsbEnvironmentList() {
				getEsbEnvironmentByEsbFlg({}).then(response => {
					this.esbEnvironmentList = response.data.extend;
					if(this.row.proxyPath != undefined){
						service2Json(this.row).then(response => {
							let data = response.data.extend;
							this.query.requestBody= JSON.stringify(data,null,2);
							//跳转到测试页面
							//this.$refs.xmlExample.ShowDialog(data);
							//alert(data);
						}).catch(error => {
							console.info("失败");
							console.info(error.message);
						});
					}
				})
			},

			onSubmit() {
				this.$refs["form"].validate((valid) => {
					if (valid) {
						const loading = this.$loading({
							lock: true,
							text: '网络测试中，请稍后',
							spinner: 'el-icon-loading'
						});
						httpTrans(this.query).then(response => {
							loading.close();
							if (response.data.code = '0000') {
								this.query.responseBody = this.$marked('```json\n' + response.data.extend +
									'\n```');
							} else {
								this.$message({
						duration:5000,
									type: 'error',
									message: response.data.message
								});
							}
						}).catch(error => {
							loading.close();
							this.$message({
						duration:5000,								type: 'error',
								message: '联通性测试失败！'
							});
						});;

					}
				});
			}
		}
	}
</script>
<style scoped>
	.article {
		margin-top: -11px;
		margin-left: 0px;
		padding-left: 0px;
	}
</style>
